<script setup lang="ts">
import {StnTable, StnTableOperations, StnTableColSetting, StnCollapseSearch} from "st-ui-vue3-navie"
import {columnsOrigin, dataOrigin} from './data.ts'
import {ref} from 'vue'
import {klona} from "klona"

const columns = ref(columnsOrigin)
const data = ref(klona(dataOrigin))
</script>

<template>
  <div class="sys-menu w-full h-screen bg-gray-100">
    <StnTable
      :columns="columns"
      :data="data"
      :row-key="row => row.no"
      is-filter-collapse
      :scroll-x="1800"
      :pagination="{
        simple: true,
      }"
      @col-showed-change="(cols) => {console.log(cols)}"
    >
      <template #search>
        <StnCollapseSearch :expend-default="true"></StnCollapseSearch>
      </template>
      <template #operations>
        <StnTableOperations
          cascade
          expand-all
        >
          <template #affix>
            <StnTableColSetting></StnTableColSetting>
          </template>
        </StnTableOperations>
      </template>
    </StnTable>
  </div>
</template>

<style>
.box-bg {
  background-color: #fff;
  box-shadow: 0 3px 15px 3px rgba(17, 17, 17, 0.15);
}
</style>
